<template>
  <div class="settings-page">
    <el-card class="center-card">
      <el-form label-width="auto">
        <el-form-item label="">
          <el-text class="welcome-title" size="large">注册观弈零代码平台</el-text>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
              type="password"
              v-model="password"
              :show-password="true"
              @input="checkPasswordStrength"
          ></el-input>
          <div id="password-strength-bar">
            <span :class="passwordStrengthClass">{{ passwordStrength }}</span>
          </div>
        </el-form-item>
        <el-button type="primary" @click="submit">完成注册</el-button>
        <el-button type="primary" @click="goLogin">返回登录</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { registerInfoKey } from '@/config/app.keys';

import {  register } from "@/api/login";
import { ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { setEnterpriseCode,setApplicaitonCode } from '@/utils/auth';
const password = ref('');
const passwordStrength = ref('');
const passwordStrengthClass = ref('medium');
const registerInfo = ref(JSON.parse(localStorage.getItem(registerInfoKey)))
const router = useRouter();
function checkPasswordStrength() {
  let strength = 0;

  if (password.value.length > 0) {
    strength += 1; // 长度至少为 8 个字符
  }

  if (
      /[a-zA-Z]+/.test(password.value) &&
      /[0-9]+/.test(password.value)
  ) {
    strength += 1; // 包含数字和字母
  }

  if (/[^a-zA-Z^0-9]/.test(password.value)) {
    strength += 1; // 包含特殊符号
  }

  if (strength >= 3) {
    passwordStrengthClass.value = 'strong';
    passwordStrength.value = '强'
  } else if (strength === 2) {
    passwordStrengthClass.value = 'medium';
    passwordStrength.value = '中'
  } else if (strength <= 1 || !password.value) {
    passwordStrengthClass.value = 'weak';
    passwordStrength.value = '弱'
  }
}

function submit() {
  //将registerInfo提交到后台注册接口
  setEnterpriseCode("-")
  setApplicaitonCode("-")
  registerInfo.value.userInfo.password = password.value
  register(registerInfo.value).then(res => {
    const username = registerInfo.value.userInfo.phone
    ElMessageBox.alert("<font color='red'>恭喜你，您的账号 " + username + " 注册成功！</font>", "系统提示", {
      dangerouslyUseHTMLString: true,
      type: "success",
    }).then(() => {
      // localStorage.removeItem(registerInfoKey);
      // router.push("/login");
    }).catch(() => {});
  }).catch(() => {
  });
}
function goLogin(){
  router.push("/login")
}
</script>

<style scoped>
#password-strength-bar {
  height: 20px;
  width: 100%;
  background-color: #e4e4e4;
  border-radius: 4px;
  margin-top: 10px;
  overflow: hidden;
  position:relative;
}

#password-strength-bar span {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  line-height: 20px;
  text-align: center;
  font-size: 12px;
  width: 100%;
}

.medium {
  background-image: linear-gradient(to right,  #409eff, #409eff);
}

.strong {
  background-image: linear-gradient(to right, #67c23a, #67c23a);
}

.weak {
  background-image: linear-gradient(to right, #f56c6c, #f56c6c);
}

.welcome-title {
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 22px;
  font-weight: 600;
  line-height: 30px;
  color: #1f2329;
}

.center-card {
  width: 500px; /* 根据需要设置卡片宽度 */
}

.settings-page {
  margin: auto;
  display: flex;
  justify-content: center;
  height: 80vh; /* 设置高度为视口高度 */
}
</style>
